<template>
	<uni-nav-bar title="安蓝服务站" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
	<scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box"
		:style="{ height: pageHeight + 'px' }">
		<view class="package" style="padding:30rpx 20rpx" v-for="item in orderLists" :key="item.id">
			<view class="space-between">
				<view style="width:65%">{{item.name}}</view>
				<view>{{item.amount}}公斤</view>
			</view>
			<view style="margin-top:10rpx;">{{item.address}}</view>
		</view>
	</scroll-view>
	<view class="add" @click="navTo('administrator/service/addService')">新增加注站</view>
</template>

<script setup lang="ts">
	import { navBack, navTo } from '@/utils/navigator';
	import { ref } from 'vue';
	import { toPublish } from '@mqtt';
	import { getServiceAreaList } from '@/gql/administrator';
	import { onShow } from '@dcloudio/uni-app';
	import { showLoading } from '@/utils/prompt';
	const pageHeight = ref();
	const lastPage = ref(1);
	const currentPage = ref(1);
	const orderLists = ref([])
	uni.getSystemInfo({
		success: function (res) {
			pageHeight.value = res.windowHeight - 120;
		},
	});
	onShow(() => {
		currentPage.value = 1
		orderLists.value = []
		init()
	})
	//安蓝服务站列表
	function init() {
		showLoading('正在加载');
		const payload = {
			query: getServiceAreaList,
			variables: {
				page: currentPage.value,
			},
		};
		toPublish('ql/control/getServiceAreaList', payload, (obj : any) => {
			uni.hideLoading();
			const { getServiceAreaList } = obj.data;
			orderLists.value = getServiceAreaList;
		});
	}
</script>

<style scoped lang="less">
	.add {
		width: 480rpx;
		height: 100rpx;
		background: linear-gradient(-10deg, #2C96F9, #1B91FF);
		border-radius: 5px;
		text-align: center;
		line-height: 100rpx;
		color: #fff;
		margin: 20rpx auto;
		font-size: 32rpx;
	}
</style>